<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
      <el-form-item label="医生数量" class="doctor-number" v-if="optionsInfo?.doctorNumber">
        <el-input-number
            :min="1"
            :max="optionsInfo.maxNumber"
            size="small"
            v-model="optionsInfo.doctorNumber"
        />
        <el-tooltip
            class="item"
            effect="dark"
            content="此属性只在模拟环境生效"
            placement="bottom"
        >
          <el-button>
            <i class="el-icon-warning"></i>
          </el-button>
        </el-tooltip>
      </el-form-item>

      <template v-if="(optionsInfo.widgetSign)==='trends2'">
        <el-form-item label="显示医生名字&隐藏候诊患者" class="column-area" label-width="100%">
          <el-switch v-model="optionsInfo['doctorNameShown']"/>
        </el-form-item>
      </template>
    </div>
    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室&诊室设置</el-divider>
      </div>
      <el-form-item label="科室&诊室" class="column-area">
        <el-checkbox-group
            v-model="optionsInfo['defaultShowCol']"
            :min="1"
            @change="handleChangeDept"
            :disabled="false"
        >
          <el-checkbox
              v-for="(item, index) in optionsInfo['colOptions']"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="科室字号">
        <el-input-number
            :disabled="!(optionsInfo.defaultShowCol).includes('deptName')"
            :min="12"
            size="small"
            v-model="optionsInfo.deptNameFontSize"
        />
      </el-form-item>

      <el-form-item label="诊室字号">
        <el-input-number
            :disabled="!(optionsInfo.defaultShowCol).includes('roomName')"
            :min="12"
            size="small"
            v-model="optionsInfo.roomNameFontSize"
        />
      </el-form-item>

      <!--诊室选中字段-->
      <template v-if="optionsInfo['defaultShowCol'].includes('roomName')">
        <roomNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>
    </div>
    <!-- 号别 -->
    <div class="list-item-setting" v-if="optionsInfo['NumberTypeOptions'] && optionsInfo['NumberTypeOptions'].onOff">
      <div class="title-info">
        <el-divider content-position="left">号别</el-divider>
      </div>
      <el-form-item label="开关">
        <el-switch v-model="optionsInfo['NumberTypeOptions'].show" active-text="开" inactive-text="关"/>
      </el-form-item>
      <el-form-item label="显示字段" class="column-area">
        <el-radio-group v-model="optionsInfo['NumberTypeOptions'].showType">
          <el-radio v-for="item in NameOptionInfo" :label="item.value" :key="item.value" :disabled="item.disabled">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">患者标题</el-divider>
      </div>
      <el-form-item label="就诊患者标题">
        <el-input
            maxlength="2"
            size="small"
            v-model="optionsInfo.currentPatientSign"
        />
      </el-form-item>

      <el-form-item label="候诊患者标题">
        <el-input
            maxlength="2"
            size="small"
            v-model="optionsInfo.waitPatientSign"
        />
      </el-form-item>
    </div>

  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "DRCTrendsConfig-editor",
  components: {roomNameKeyEditor},

  componentName: "DRCTrendsConfig-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types["predefineColors"],
      NameOptionInfo: [
        {
          value: 'registerObjName',
          label: '号别',
        },
        {
          value: 'registerObjSimpleName',
          label: '号别简称',
        },
      ]
    };
  },

  methods: {
    // 改变可是和诊室
    handleChangeDept(event, key) {
      console.log(event)
      let val = this.$lodash.uniqBy(event);
      if (val?.length === 1) {
        Reflect.set((this.optionsInfo), 'deptNameFontSize', 150);
        Reflect.set((this.optionsInfo), 'roomNameFontSize', 150)
      } else {
        Reflect.set((this.optionsInfo), 'deptNameFontSize', 92);
        Reflect.set((this.optionsInfo), 'roomNameFontSize', 120)
      }
      Reflect.set(this.optionsInfo, 'defaultShowCol', val)
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.column-area,
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__labe) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

//医生数量
.doctor-number {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 150px;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>
